<!-- 各种样式的流光按钮  暂时没用 -->
<template>
        <div class="bottonStyle">
            <div class="bun" v-if="false">
                <a href="">
                <span></span>
                <span></span>
                <span></span>
                <span></span>
                登录
                </a> 
    
            </div>
            <div class="otherBun"  v-if="false">
                <div class="container">
                    <a href="#">登录</a>
                    <a href="#">登录</a>
                    <a href="#">登录</a>
                    <a href="#">登录</a>
                    <a href="#">登录</a>
                    <a href="#">登录</a>
                </div>
            </div>
            <div class="liuguang"  v-if="false">
                <a href="#">
                    <span>登录</span>
                </a>
            </div>
            <div class="caihong">
                <div class="cover">
                    <div class="content">
                        <span>获取验证码</span>
                    </div>
                </div>
            </div>
        </div>
</template>

<script lang="ts" setup>

</script>

<style lang="less" scoped>
.bun{
    height: 200px;
    // background-color: #000;
    padding: 45px;
    a{
        text-decoration: none;
        // color: #03e9f4;
        color:#fff !important;
        background-color: rgba(218,71,226,.7);
        background: linear-gradient(120deg,#f01aac,#e02853,#f6a3e4);
            background-size: 200%;
        cursor: pointer;
        position: relative;
        display: inline-block;
        padding: 15px 30px;
        margin: 0 25px;
        text-transform: uppercase;
        letter-spacing: 4px;
        overflow: hidden;
        font-weight: bold;
    }
    a:nth-child(1){
        filter: hue-rotate(270deg);
    }

    a:nth-child(2){
        filter: hue-rotate(110deg);
    }
    a>span{
        position: absolute;
        display: block
    }
    a>span:nth-child(1){
        top: 0;
        left: 0;
        width: 100%;
        height: 3px;
        background: linear-gradient(90deg,transparent,rgb(138, 13, 145));
        animation: span1 1s linear infinite;
    }
    a>span:nth-child(2){
        top: -100%;
        right: 0;
        width: 3px;
        height: 100%;
        background: linear-gradient(180deg,transparent,rgb(138, 13, 145));
        animation: span2 1s .25s linear infinite;
    }
    a>span:nth-child(3){
        bottom: 0;
        right: 0;
        width: 100%;
        height: 3px;
        background: linear-gradient(270deg,transparent,rgb(138, 13, 145));
        animation: span3 1s .75s linear infinite;
    }
    a>span:nth-child(4){
        bottom: -100%;
        left: 0;
        width: 3px;
        height: 100%;
        background: linear-gradient(360deg,transparent,rgb(138, 13, 145));
        animation: span4 1s .5s linear infinite;
    }
    @keyframes span1 {
        0%{left: -100%;}
        50%,100%{
            left: 100%;
        }
    }
    @keyframes span2 {
        0%{top: -100%;}
        50%,100%{
            top: 100%;
        }
    }
    @keyframes span3 {
        0%{right: -100%;}
        50%,100%{
            right: 100%;
        }
    }
    @keyframes span4 {
        0%{bottom: -100%;}
        50%,100%{
            bottom: 100%;
        }
    }
    a:hover{
        background-color: #03e9f4;
        color: #050801;
        box-shadow: 0 0 5px #03e9f4,
                    0 0 25px #03e9f4,
                    0 0 200px #03e9f4;
        // -webkit-box-reflect: below 1px linear-gradient (transparent,#0005);
    }
}
.otherBun{
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 200px;
    .container{
        width: 100%;
        display: flex;
        justify-content: space-around;
        flex-wrap: wrap;
        a{
            position: relative;
            padding:13px 30px ;
            text-decoration: none;
            margin: 20px;
            letter-spacing: 2px;
            color: #fff;
            transition: .5s;
            border-radius: 14px;
        }
         a:nth-child(1){
            background: linear-gradient(120deg,#a18cd1,#fbc2eb,#a18cd1);
            background-size: 200%;
         }
         a:nth-child(2){
            background: linear-gradient(120deg,#43e97b,#38f9d7,#43e97b);
            background-size: 200%;
         }
         a:nth-child(3){
            background: linear-gradient(120deg,#fa709a,#fee140,#fa709a);
            background-size: 200%;
         }
         a:nth-child(4){
            background: linear-gradient(120deg,#4481eb,#04befe,#ff81eb);
            background-size: 200%;
         }
         a:nth-child(5){
            background: linear-gradient(120deg,#ffe29f,#ffe29f,#ffe29f);
            background-size: 200%;
         }
         a:nth-child(6){
            background: linear-gradient(120deg,#fdfc47,#24fe41,#fdfc47);
            background-size: 200%;
         }
    }
    .container a:hover{
        background-position: right;
        transform: translateY(-15px);
    }
    .container a::after{
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 50%;
        height: 100%;
        background: rgba(255, 255, 255, .2);
    }
    .container a::before{
        content: "";
        position: absolute;
        bottom: 0;
        left: 5%;
        width: 90%;
        height: 4px;
        background: rgba(0 , 0, 0, .2);
        border-radius: 50%;
        transform: scale(0);
        transition: .5s;
    }
    .container a:hover::before{
        transform: scale(1);
        bottom: -15px;
    }

}
.liuguang{
   margin: 0;
   padding: 0;
   display: flex;
   justify-content: center;
   align-items: center;
   height: 200px;
//    background: #000;
   a{
        position: relative;
        width: 200px;
        height: 50px;
        line-height: 50px;
        text-align: center;
        text-decoration: none;
        text-transform: uppercase;
        font-size: 20px;
        color: #fff;
        background: linear-gradient(to right,#03a9f4,#f441a5,#ffeb3b,#09a8f4);
        background-size: 400%;
        border-radius: 50px;
        z-index: 1;
    }
    

a::before{
    content: "";
    position: absolute;
    top: -5px;
    left: -5px;
    bottom: -5px;
    right: -5px;
    background: linear-gradient(to right,#03a9f4,#f441a5,#ffeb3b,#03a9f4);
    background-size: 400%;
    border-radius: 50px;
    z-index: -1;
    filter: blur(20px);
}
a:hover{
    animation: streamer 8s infinite;
}
a:hover::before{
    animation: streamer 8s infinite;
}
@keyframes streamer {
        100%{
            background-position: -400% 0;
        }
        
    }
}
.caihong{
    margin: 0;
    padding: 0;
    // background: #ccc;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 200px;
  
    .cover{
        display: flex;
        align-items: center;
        justify-content: center;
        height: 40px;
        width: calc(80% + 4px);
        box-shadow: 0 0 10px 0#000;
        border-radius: 8px;
        background:linear-gradient(120deg,#4481eb,#04befe,);
        animation: cccc 3s linear infinite;
        .content{
            height: 30px;
            width: 80%;
            text-align: center;
            line-height: 30px;
            background-color: #ccc;
            // background-color: #fff;
            color: #03a8f484;
            border-radius: 5px;


}
.cover:hover{
    // box-shadow: 0 0 20px 0 #b1a6a6;
}

    }
    @keyframes cccc {
        to{
            filter:hue-rotate(360deg)
        }
        
    }
}
</style>

<!-- 
       1.只允许用户类型为从业人员的用户登录。
       2.密码输入时，通过显示“·”标识符，隐藏输入的密码；
       3.用户名和密码必填：
         用户名为空时，点击“登录”，红色字体提示：请输入用户名；
         密码为空时，点击“登录”，红色字体提示：请输入密码；
       4.图形验证码必填：
         若图形验证码为空，点击“登录”，提示“请输入图形验证码”；
         若图形验证码输入有误，提示“图形验证码有误，请重新输入”；
         图形验证码生成规则：随机生成五位由数字、大小写字母组成的字符串；
         图形验证码校验时，不区分大小写；
         点击图片更换图形验证码图片，上一图形验证码失效；
       5.若根据用户名可以查到用户，但密码错误：
         前5次错误提示“用户名或密码有误，请重新输入”；
         第6次到第9次错误提示（提示框）：“密码有误已达X次，当日错误满10次后，用户名将被冻结”；
         用户连续10次错误，系统对用户名进行冻结操作；并提示用户用户名已冻结，请联系管理员。
         用户当天登录成功后，当天之前登录错误次数置零。
       6.若根据用户名无法查到用户，提示“用户名或密码有误，请重新输入”；
    -->
